<template>
  <BasicForm>
    <template #name="{ model, field }">
      <Input v-model:value="model[field]" @change="handleChange" />
    </template>
    <template #submitSetting>
      <a-collapse expandIconPosition="right">
        <a-collapse-panel header="提交设置" :force-render="true">
          <BasicForm @register="registerSubmitSettingForm" />
        </a-collapse-panel>
      </a-collapse>
    </template>
    <template #retrySetting>
      <a-collapse expandIconPosition="right">
        <a-collapse-panel header="重试处理设置" :force-render="true">
          <BasicForm @register="registerRetrySettingForm" />
        </a-collapse-panel>
      </a-collapse>
    </template>
    <template #pollingSetting>
      <a-collapse expandIconPosition="right">
        <a-collapse-panel header="轮询设置" :force-render="true">
          <BasicForm @register="registerPollingSettingForm" />
        </a-collapse-panel>
      </a-collapse>
    </template>
  </BasicForm>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { Collapse as ACollapse, CollapsePanel as ACollapsePanel, Input } from 'ant-design-vue';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import {
    submitSettingSchemas,
    retrySettingSchemas,
    pollingSettingSchemas,
  } from './queueForm.data';
  import { watch, ref, nextTick } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const emits = defineEmits(['collectFormData', 'changeName']);
  const props = defineProps({
    formValue: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: String,
    },
    okFlag: {
      type: Boolean,
      default: false,
    },
  });
  const submitSettingFormValue = ref<object>();
  const retrySettingFormValue = ref<object>();
  const pollingSettingFormValue = ref<object>();
  const { createMessage } = useMessage();
  const [
    registerSubmitSettingForm,
    { setFieldsValue: setSubmitSetting, validate: validateSetting },
  ] = useForm({
    layout: 'vertical',
    schemas: submitSettingSchemas,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [registerRetrySettingForm, { setFieldsValue: setRetrySetting, validate: validateRetry }] =
    useForm({
      layout: 'vertical',
      schemas: retrySettingSchemas,
      showActionButtonGroup: false,
      ...modalFormStyleSetting,
    });
  const [registerPollingSettingForm, { setFieldsValue: setPolling, validate: validatePolling }] =
    useForm({
      layout: 'vertical',
      schemas: pollingSettingSchemas,
      showActionButtonGroup: false,
      ...modalFormStyleSetting,
    });
  watch(
    () => props.okFlag,
    async () => {
      try {
        const settingValues = await validateSetting();
        const retryValues = await validateRetry();
        const pollingValues = await validatePolling();
        emits('collectFormData', 'success', props.index, {
          submitSetting: settingValues,
          retrySetting: retryValues,
          pollingSetting: pollingValues,
        });
      } catch (error) {
        emits('collectFormData', 'error');
        createMessage.warning('请检查 队列 表单填写是否正确');
      }
    },
  );
  watch(
    () => props.formValue,
    (nVal) => {
      submitSettingFormValue.value = props.formValue.submitSetting;
      retrySettingFormValue.value = props.formValue.retrySetting;
      pollingSettingFormValue.value = props.formValue.pollingSetting;
      nextTick(() => {
        setSubmitSetting({
          ...nVal.submitSetting,
        });
        setRetrySetting({
          ...nVal.retrySetting,
        });
        setPolling({
          ...nVal.pollingSetting,
        });
      });
    },
    {
      immediate: true,
      deep: true,
    },
  );

  function handleChange(e: any) {
    emits('changeName', props.index, e.target.value);
  }
</script>
